<template>
  <div>
    <el-table
      ref="multipleTable"
      :data="list"
      tooltip-effect="dark"
      style="width: 100%"
      row-key="id">
      <el-table-column
        type="selection"
        width="55"
        reserve-selection>
      </el-table-column>
      <el-table-column
        prop="name"
        label="店铺名称"
        width="120">
      </el-table-column>
      <el-table-column
        prop="address"
        label="详细地址"
        width="120">
      </el-table-column>
      <el-table-column
        prop="storeType"
        label="店铺类型"
        width="120">
        <template slot-scope="scope">{{ scope.row.storeType == 0 ? '普通' : '村社' }}</template>
      </el-table-column>
      <el-table-column
        prop="contacts"
        label="联系人"
        show-overflow-tooltip>
      </el-table-column>
      <el-table-column
        prop="remark"
        label="描述"
        show-overflow-tooltip>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="initData" />
    <div style="margin-top: 20px">
      <el-button type="primary" @click="submit">提交按钮</el-button>
      <el-button type="error" @click="cancel">取消</el-button>
    </div>
  </div>
</template>

<script>
import { getUnallocatedStoreList, getRoleList, roleStoreCreate } from '@/api/apiShop'
import Pagination from '@/components/Pagination'

export default {
  name: 'shop',
  components: { Pagination },
  props: ['cancel','roleId'],
  data() {
    return {
      list: [], //列表数据
      total: 0, //数据数量
      listQuery: { //筛选条件
        page: 1, //页码
        limit: 15, //数据条数
        sort: 'add_time', //排序字段
        order: 'desc' //排序方式
      },
      selectIds: [], //选中的id列表
      selectList: [], //选中的列表数据
      checkList: []
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    initData() { //数据初始化
      getUnallocatedStoreList(this.listQuery).then(res => { //调用列表接口
        this.list = res.data.data.list
        this.total = res.data.data.total
        this.initCheckSelect()
      })
    },
    clickSelect(selection,row){ //选中触发事件

    },
    initCheckSelect(){
      getRoleList({roleId: this.roleId}).then(res => {
        let datas = res.data.data;
        // let clist = this.list.filter(li => res.data.data.includes(li.id))
        // console.log(clist,res,this.list);
        console.log([...datas])
        let arrIndex = []
        for(let i = datas.length - 1;i > -1 ;i-- ){
          this.list.forEach(li => {
            if (li.id == datas[i].id){
              arrIndex.push(i)
            }
          })
        }
        arrIndex.forEach(ind => {
          datas.splice(ind,1);
        })
        console.log([...datas])

        this.list = [...this.list,...datas]
        datas.forEach(data => {
          this.$refs.multipleTable.toggleRowSelection(data);
        })

        // if(clist.length > 0){
        //   this.$refs.multipleTable.toggleRowSelection(clist[0]);
        // }
      })
    },
    submit(){
      let storeIds = this.$refs.multipleTable.selection.map(item => item.id)
      roleStoreCreate({roleId: this.roleId,storeId: storeIds.join(',')}).then(res => {
        this.$message.success('操作成功')
      })
    }
  }
}
</script>

<style scoped>

</style>
